{% extends 'base/base.html' %}
{% load static %}
{% block title %}新建 {{meta.title}}{% endblock %}
{% block extra-css %}
{{form.media.css}}
<style>
  .fa.fa-square.text-white {
    color: aliceblue;
  }
</style>
{% endblock %}
{% block content-header %}<h1>{{meta.verbose_name}} <small> 新建{{meta.verbose_name}}</small></h1>{% endblock %}

{% block main-content %}
<div class="box box-primary">
    {%block box-header%}
    <div class="box-header with-border">
        <h3 class="box-title"> 新建{{meta.verbose_name}}</h3>
        <div class="box-tools pull-right">
          <div class="btn-group margin-r-5">
            <button type="button" class="btn btn-default btn-sm" onclick="window.history.go(-1)">
              <i class="fa fa-arrow-circle-o-left"></i><span> 返回上一页</span>
            </button>
          </div>
          {%if 'mark' in form.fields%}
          <button type="button" data-complete-text="已共享" data-toggle="buttons" id="to_shared" class="btn btn-info btn-sm hidden-xs">共享</button>
          {%endif%}
        </div>
    </div>
    {%endblock box-header%}
    {%block form%}
    <form action="" method="POST" role="form" class="form-horizontal" id="{{meta.model_name}}-new">
      {%block box-body%}
      <div class="box-body">
        {% csrf_token %}

        {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
        <p class="text-red">
          {{ error }}
        </p>
        {% endfor %}
        {% endif %}

        {%if formset %}
        {{ formset }}
        {%else%}
        {% for hidden in form.hidden_fields %}
          {{ hidden }}
        {% endfor %}
        {% for field in form.visible_fields %}
        <div class="form-group">
          <label for="{{ field.id_for_label }}" class="col-sm-2 control-label">
            {{ field.label }}
          </label>
          <div class="col-sm-5">
          {{ field }}
          </div>
          <div class="col-sm-5 help-block">
            {%if field.field.required%}
              <span class="text-red">必填</span>
            {%else%}
              <span class="text-muted">选填</span>
            {%endif%}
            {{ field.help_text|safe}}
          <div class="text-red">{{ field.errors|safe }}</div>
          </div>
        </div>
        {% endfor %}
        {% endif %}
        </div>
        {%endblock box-body%}
        {%block box-footer%}
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-sm" onclick="window.history.go(-1)">取消并返回</button>
          <div class="btn-group pull-right">
            <button type="submit" name="_addanother" class="btn btn-primary btn-sm margin-r-5">保存并新增</button>
            <button type="submit" name="_saverview" class="btn btn-primary btn-sm margin-r-5">保存并查看</button>
            <button type="submit" name="_saverlist" class="btn btn-primary btn-sm">保存返回列表</button>
          </div>
        </div>
        {%endblock box-footer%}
    </form>
    {%endblock form%}
    {% block page-extra %}
    {% endblock page-extra %}
</div>
{% endblock %}
{% block extra-js %}
{{form.media.js}}
<script>
$(document).ready(function (){

// reset modal cache
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

// S Select2
$("select").select2({language: "zh-CN"});

// Select2 color
function formatState (state) {
  if (!state.id) {
    return state.text;
  }

  var $state = $(
    '<span><i class="fa fa-square" /></i> <span></span></span>'
  );

  // Use .text() instead of HTML string concatenation to avoid script injection issues
  $state.find("span").text(" " + state.text);
  // <i class="fa fa-square text-orange"></i>
  $state.find("i").addClass("text-"+state.element.value.toLowerCase());
  return $state;
};

var ColorSelect = $('select#id_color');
if (ColorSelect.length != 0) {
  ColorSelect.select2({
    templateSelection: formatState,
    language: "zh-CN"
  });
}
// E Select2

// Make shared
var Shared = $("#to_shared");
if (Shared.length != 0){
  $("#to_shared").click(function () {
    $(this).button('toggle').delay(100).queue(function() {
      if ($(this).hasClass('btn-info')) {
        $(this).addClass('btn-success').removeClass('btn-info');
        $("#id_mark").val('shared');
        $(this).button('complete');
        $(this).dequeue();
      } else if ($(this).hasClass('btn-success')) {
        $(this).addClass('btn-info').removeClass('btn-success');
        $("#id_mark").val('');
        $(this).button('complete');
        $(this).button('reset').delay(100).dequeue();
      }
    });
  });
}

var formSubmitted = false;
var oldFormData = $('form').serialize();
$("form").submit(function(e){
  var newFormData = $('form').serialize();
  if (oldFormData == newFormData){
    alert("没有任何改变,已经阻止表单提交.");
    return false;
  }
  formSubmitted = true;
});

//window.onbeforeunload = function () {
//  if (!formSubmitted) {
//    return "您似乎有些数据没有保存";
//  }
//};

//DateTimeField
var DateTimeField = $("input[data-datetime='true']");
if (DateTimeField.length != 0) {
  DateTimeField.daterangepicker({
    // timePicker: true,
    // timePickerIncrement: 5,
    // timePicker24Hour: true,
    locale:{
      format: 'YYYY-MM-DD H:mm:ss',
      applyLabel: '确认',
      cancelLabel: '取消',
      fromLabel: '从',
      toLabel: '到',
      weekLabel: 'W',
      customRangeLabel: '选择时间',
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    },
    singleDatePicker: true
  });
}

});
</script>
{% block SubScript %}
{% endblock SubScript %}
{% endblock %}
